<template>
	<layer-box ref="layer" overlay-style="background: rgba(0, 0, 0, 0.50);backdrop-filter: blur(8.3px);" width="466px" height="406px">
		<view class="content">
			<uv-text :text="title" color="#fff" size="24px" margin="50px 0 75px" align="center"></uv-text>
			<uv-form labelPosition="left" :model="formData" :rules="rules" ref="form" label-width="0">
				<uv-form-item prop="code">
					<uv-input v-model="val" maxlength="4" placeholder="请输入验证码" placeholder-class="placeholder-style" border="surround" color="#fff" font-size="16px" custom-style="height: 54px;border-color: #BABAD8!important;">
						<template v-slot:prefix>
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
								<path
									d="M17 10V8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8V10M12 14.5V16.5M8.8 21H15.2C16.8802 21 17.7202 21 18.362 20.673C18.9265 20.3854 19.3854 19.9265 19.673 19.362C20 18.7202 20 17.8802 20 16.2V14.8C20 13.1198 20 12.2798 19.673 11.638C19.3854 11.0735 18.9265 10.6146 18.362 10.327C17.7202 10 16.8802 10 15.2 10H8.8C7.11984 10 6.27976 10 5.63803 10.327C5.07354 10.6146 4.6146 11.0735 4.32698 11.638C4 12.2798 4 13.1198 4 14.8V16.2C4 17.8802 4 18.7202 4.32698 19.362C4.6146 19.9265 5.07354 20.3854 5.63803 20.673C6.27976 21 7.11984 21 8.8 21Z"
									stroke="#BABAD8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
							</svg>
						</template>
						<template v-slot:suffix>
							<view class="captcha-img-box">
								<uv-loading-icon class="loading-icon" v-if="loading" size="20px"></uv-loading-icon>
								<image class="captcha-img" :src="captchaBase64" mode="heightFix" @click="getImageCaptcha"></image>
							</view>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-gap height="70px"></uv-gap>
				<view class="btns uv-flex-row">
					<btn-shine @click="close">取消</btn-shine>
					<btn-shine shine :loading="btnLoading" @click="sub">确认</btn-shine>
				</view>
			</uv-form>
		</view>
	</layer-box>
</template>
<script setup>
	import { computed, reactive, ref, watch } from 'vue';
	const emits = defineEmits(['update:modelValue', 'confirm']);
	const layer = ref(null);
	const loading = ref(false);
	const btnLoading = ref(false);
	const captchaBase64 = ref('');
	const form = ref(null);
	const formData = reactive({
		code: ''
	})
	const rules = {
		code: [{
			type: 'string',
			required: true,
			message: '请输入验证码',
			trigger: ['blur', 'change']
		}, {
			validator: (rule, value, callback) => {
				return value.trim().length == 4;
			},
			message: '请输入正确图形验证码',
			trigger: ['blur']
		}]
	}
	const props = defineProps({
		modelValue: String,
		scene: {
			type: String,
			default: ''
		},
		title: {
			type: String,
			default: '输入验证码'
		}
	})
	const val = computed({
		get: () => {
			return props.modelValue;
		},
		set: (value) => {
			formData.code = value;
			emits('update:modelValue', value);
		}
	})

	function sub() {
		form.value.validate().then(res => {
			emits('confirm');
			close();
		}).catch(errors => {})
	}
	// 获取验证码图片
	function getImageCaptcha() {
		if (loading.value) return;
		loading.value = true
		captchaBase64.value = '';
		const uniIdCo = uniCloud.importObject("uni-captcha-co", {
			customUI: true
		})
		uniIdCo.getImageCaptcha({
			scene: props.scene
		}).then(result => {
			captchaBase64.value = result.captchaBase64;
		}).catch(e => {
			getApp().globalData.notify({
				type: 'error',
				message: e.message
			})
		}).finally(e => {
			loading.value = false
		})
	}

	function open() {
		watch(() => props.scene, (scene) => {
			if (scene) {
				getImageCaptcha();
			} else {
				getApp().globalData.notify({
					type: 'error',
					message: 'scene不能为空'
				})
			}
		}, { immediate: true })
		layer.value.open();
	}

	function close() {
		layer.value.close();
	}
	defineExpose({ open, close });
</script>
<style scoped lang="scss">
	.content {
		position: relative;
		height: 346px;
		padding: 0 48px;
		.btns {
			position: absolute;
			bottom: 40px;
			left: 48px;
			right: 48px;
			justify-content: space-between;
		}
		.captcha-img-box,
		.captcha-img {
			width: 132px;
			height: 44px;
			background-color: #FEFAE7;
		}
		.captcha-img-box {
			position: relative;
			cursor: pointer;
			.loading-icon {
				position: absolute;
				left: 50%;
				top: 50%;
				z-index: 1;
				transform: translate(-50%, -50%);
			}
		}
	}
</style>